<template>
  <div class="main">
    <a-layout class="layout">
      <a-layout-header class="header">
        <div>
          <span></span>
          基础信息
        </div>
        <a-button @click="handleClick" type="primary">
          <template #icon>
            <icon-edit />
          </template>
          <template #default>编辑</template></a-button
        >
      </a-layout-header>
      <a-layout-content class="main">
        <div style="display: flex; justify-content: center">
          <div class="cn">
            <div
              class="cn-main"
              v-for="item in controlsData"
              :key="item.ctlCode"
            >
              <span>{{ item.ctlCnName + ':' }}</span>
              <a-input class="cn-input" disabled placeholder="自动获取" />
            </div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
    <a-layout class="layout">
      <a-layout-header class="header">
        <div>
          <span></span>
          入职手续清单
        </div>
        <a-button @click="visibleEvent = true" type="primary">新增</a-button>
      </a-layout-header>
      <a-layout-content class="main">
        <a-table
          :data="from"
          :span-method="dataSpanMethod"
          :bordered="{
            wrapper: true,
            cell: true,
            headerCell: true,
            bodyCell: true
          }"
          stripe
          :pagination="false"
        >
          <template #columns>
            <a-table-column
              align="center"
              title="办理环节"
              dataIndex="handlerProcess"
              :width="200"
            >
            </a-table-column>
            <a-table-column
              :width="200"
              dataIndex="handlerMatters"
              align="center"
              title="办理事项"
            ></a-table-column>
            <a-table-column
              :width="200"
              dataIndex="matterAsk"
              align="center"
              title="办理事项要求"
            ></a-table-column>
            <a-table-column
              :width="200"
              dataIndex="handlerDept"
              align="center"
              title="办理部门"
            ></a-table-column>
            <a-table-column
              :width="200"
              dataIndex="handlerUser"
              align="center"
              title="办理人"
            ></a-table-column>
            <a-table-column
              :width="200"
              dataIndex="userMobile"
              align="center"
              title="办理人联系方式"
            ></a-table-column>
            <a-table-column
              :width="200"
              dataIndex="handlerAddr"
              align="center"
              title="办理地点"
            ></a-table-column>
            <a-table-column
              title="操作"
              dataIndex="handlerAddr"
              align="center"
              :width="120"
              fixed="right"
            >
              <template #cell="{ record, rowIndex }">
                <a-tooltip content="编辑">
                  <icon-font
                    @click="edit(record)"
                    type="icon-edit"
                    :size="26"
                    :style="{
                      marginRight: '10px',
                      cursor: 'pointer'
                    }"
                  />
                </a-tooltip>
                <a-tooltip content="删除" position="left">
                  <a-popconfirm
                    content="是否确认删除该条数据?"
                    @ok="del(record, rowIndex)"
                  >
                    <icon-font
                      type="icon-delete"
                      :size="26"
                      :style="{
                        cursor: 'pointer',
                        marginRight: '10px'
                      }"
                    />
                  </a-popconfirm>
                </a-tooltip>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </a-layout-content>
    </a-layout>
    <a-drawer
      :width="500"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
    >
      <template #title> 基础信息 </template>
      <div v-for="(item, index) in labelList" :key="item.ctlCode">
        <p>{{ item.name }}</p>
        <a-table
          :data="item.componentModel"
          @change="(data) => handleChange(data, index)"
          :draggable="{ type: 'handle', width: 40 }"
          stripe
        >
          <template #columns>
            <a-table-column align="center" :width="200">
              <template #title> 字段名称 </template>
              <template #cell="{ record }">
                {{ record.ctlCnName }}
              </template>
            </a-table-column>
            <a-table-column align="center" :width="80">
              <template #title> 是否显示 </template>
              <template #cell="{ record }">
                <a-checkbox v-model="record.isShow"></a-checkbox>
              </template>
            </a-table-column>
            <a-table-column align="center" :width="80">
              <template #title> 是否必填 </template>
              <template #cell="{ record }">
                <a-checkbox v-model="record.isRequired"></a-checkbox>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </a-drawer>
    <eventFrom
      @updateFromData="updateFromData"
      @updateFromDataOne="updateFromDataOne"
      v-model:visible="visibleEvent"
      :fromData="editfromData"
    />
  </div>
</template>
<script setup lang="ts">
import { PutOnboardingProceduretemplate } from '@/apis/management/personnel/baseSetting/TransactionSetting';
import clonedeep from 'lodash.clonedeep';
import eventFrom from './eventFrom';
const props = withDefaults(
  // 参数说明
  defineProps<{
    materialData?: any[];
    controls?: any[];
    seconds?: any[];
  }>(),
  {
    materialData: () => {
      return [];
    }
  }
);

const emit = defineEmits([
  'updateControls',
  'updateMaterialData',
  'delMaterialData'
]);
const editfromData: any = ref({});
const labelList: any = ref([]);
const controls: any = reactive({ data: [] });

const controlsData = computed(() => {
  if (props.controls?.length !== 0) {
    return clonedeep(props.controls).filter((ele: any) => ele.show === 1);
  } else {
    const newArr: any = [];
    labelList.value.forEach((ele: any) => {
      ele.componentModel.forEach((item: any) => {
        // item.isShow = true;
        if (item.isShow) newArr.push(item);
      });
    });
    return newArr;
  }
});

const fromData: any = reactive({ data: [] });
const visible = ref(false);
const visibleEvent = ref(false);
const handleClick = () => {
  visible.value = true;
};
const handleOk = async () => {
  let newArr: any = [];
  labelList.value.forEach((ele: any) => {
    newArr.push(...ele.componentModel);
  });
  const change: any = [];
  newArr.forEach((ele: any) => {
    ele.isShow ? (ele.show = 1) : (ele.show = 2);
    ele.isShow
      ? change.push({ show: 1, id: ele.id })
      : change.push({ show: 2, id: ele.id });
  });
  await PutOnboardingProceduretemplate({ controls: change });
  emit(
    'updateControls',
    clonedeep(newArr).filter((ele: any) => ele.isShow)
  );
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
const form: any = reactive({ data: [] });

const handleChange = (_data: any, index: number) => {
  labelList.value[index].componentModel = _data;
};

const del = (ind: number, inds: number) => {
  const data = { ind, inds };
  emit('delMaterialData', ind);
  // newStuff.value.splice(ind, 1);
};
// 表格合并
const dataSpanMethod = (datas: any) => {
  const { record, rowIndex, columnIndex, column } = datas;
  // 处理rowSpan
  const obj = {
    rowspan: 2,
    colspan: 0
  };
  // 当检索到相同数据则返回 那条数据
  let arr = from.value.filter((res: any) => {
    return res.node == record.node;
  });
  if (
    from.value[rowIndex - 1]?.node != record.node &&
    (column.dataIndex === 'node' ||
      column.dataIndex === 'department' ||
      column.dataIndex === 'person' ||
      column.dataIndex === 'space' ||
      column.dataIndex === 'phone' ||
      column.dataIndex === 'operation')
  ) {
    // 匹配到相同数据的长度
    obj.rowspan = arr.length;
  } else {
    // 如果上一行的数据与当前的数据相同，就将rowSpan变为0
    obj.rowspan = 0;
  }

  return obj;
};
//入职手续表单数据
const from = computed(() => {
  if (fromData.data.length !== 0) {
    const newArr: any = [];
    fromData.data?.forEach((ele: any) => {
      ele.demands.forEach((item: any) => {
        item.node = ele.node;
        item.space = ele.space;
        item.department = ele.department;
        item.person = ele.person;
        item.phone = ele.phone;
        item.demands = clonedeep(ele.demands);
        newArr.push(clonedeep(item));
      });
    });
    return newArr;
  } else {
    return [];
  }
});

const updateFromData = (e: any) => {
  fromData.data.push(e);
  emit('updateMaterialData', clonedeep(e));
};

const updateFromDataOne = (e: any) => {
  let index = 0;
  fromData.data.forEach((ele: any, ind: number) => {
    if (ele.id === e.id) {
      index = ind;
      ele = clonedeep(e);
    }
  });
  fromData.data[index] = e;
  // fromData.data.push(e);
  // emit('updateMaterialData', clonedeep(e));
};
watch(
  () => props.materialData,
  (val) => {
    fromData.data = clonedeep(val);
  }
);
watch(
  () => props.controls,
  (val) => {
    controls.data = clonedeep(val);
  }
);
watch(
  () => props.seconds,
  (val) => {
    labelList.value = clonedeep(val);
  }
);
const edit = (data: any) => {
  visibleEvent.value = true;
  const newData = clonedeep(data);
  newData.edit = true;
  editfromData.value = newData;
};
</script>
<style lang="less" scoped>
.layout {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-color: #f3f8fe;
    border-radius: 4px;
    margin-bottom: 20px;
    div {
      display: flex;
      align-items: center;

      span {
        margin: 0 20px;
        display: inline-block;
        width: 5px;
        height: 30px;
        background-color: #165dff;
      }
    }
  }
  .main {
    padding: 0 40px 20px 40px;
    .cn {
      width: 85%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .cn-main {
        display: flex;
        width: 45%;
        margin-bottom: 20px;
        align-items: center;
        span {
          width: 100px;
          text-align: end;
          margin-right: 20px;
        }

        .cn-input {
          flex: 1;
        }
      }
    }
  }
  .arco-upload-wrapper {
    flex: 0;
  }
}
:deep(.arco-input-wrapper) {
  flex: 1;
}
</style>
